<script setup>
import { ref } from 'vue'
// 调用接口
import { homeGoods } from '@/api/home'
import { lazyApi } from '@/utils/lazy'
import PanelPage from './components/PanelPage.vue'

// 获取商品列表
const goodsList = ref([])
const getGoodsList = async () => {
  const res = await homeGoods()
  goodsList.value = res.data.result
}
const { target } = lazyApi(getGoodsList)
</script>

<template>
  <div class="panel" ref="target">
    <div v-for="item in goodsList" :key="item.id">
      <PanelPage
        :id="item.id"
        :name="item.name"
        :picture="item.picture"
        :saleInfo="item.saleInfo"
        :children="item.children"
        :goods="item.goods"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.panel {
  width: 100%;
  height: auto;
}
</style>
